<!--
 * @Description: 精彩推荐
 -->
<template>
  <div style="width:66%;margin: 10px auto">
    <div class="perfect-container layout-min-full-height">
      <div class="text-center py-6">
        <h1>精彩景点推荐</h1>
        <p class="fs-20 text-muted">你不能错过的 度假⛱️ 精彩景点合辑</p></div>
      <div class="wk-list w-r" style="margin-left: -15px; margin-right: -15px;">
        <!--单条数据-->
        <div class="w-c w-c-12" style="padding-left: 15px; padding-right: 15px; padding-bottom: 30px;"
             v-for="item in bestProducts" :key="item.pid">
          <div class="p-4 white shadow-5 hover-shadow-8">
            <span class="snow-dot"></span>
            <span class="snow-dot"></span>
            <span class="snow-dot"></span>
            <span class="snow-dot"></span>
            <span class="snow-dot"></span>
            <span class="snow-dot"></span>
            <span class="snow-dot"></span>
            <router-link :to="{ path: '/product/details', query: { productID: item.pid } }" class="">
              <div class="d-flex align-items-center border-bottom pb-3 mb-3">
                <div class="box-icon mb-0 mr-4 delay-3">
                  <img v-if=item.imgUrl class="w-56 h-56 delay-3"
                       style="border-radius:8px;"
                       data-src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/bangdan.png"
                       :src=item.imgUrl[0]
                       lazy="loaded">
                  <img v-else class="w-56 h-56 delay-3"
                       data-src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/bangdan.png"
                       src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/bangdan.png"
                       lazy="loaded">

                </div>
                <div class="d-flex flex-column flex-grow-1">
                  <h5 class="title line-height-2 text-ellipsis mb-0">
                    {{ item.productName }}
                  </h5>
                  <p class="mb-0 text-muted text-ellipsis">
                    皇家避暑胜地
                  </p>
                </div>
                <div>
                  <button class="btn btn-link px-0">
                    <i class="el-icon-paperclip fs-26"></i>
                  </button>
                </div>
              </div>
            </router-link>
            <div class="box-body">
              <p class="text-muted mb-25 fs-16 h-90"
                 style="text-indent: 34px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 3;">
                {{ item.des }}
              </p>
              <el-carousel :interval="5000" arrow="always" height="270px">
                <el-carousel-item v-for="img in item.imgUrl" :key="img">
                  <img
                    :src=img
                    class="device-content macwk-animation spaceInLeft cursor">
                </el-carousel-item>
              </el-carousel>

              <p class="text-ellipsis opacity-0 h-0 mb-0">
                更新时间：2022-01-23
              </p>
            </div>
          </div>
        </div>
        <!--单条数据-->
        <!--数据加载-->
        <div class="infinite-loading-container">
          <div class="infinite-status-prompt"
               style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;"><i
            data-v-4b642ee6="" class="loading-default"></i></div>
          <div class="infinite-status-prompt"
               style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;">No results :(
          </div>
          <div class="infinite-status-prompt" style="display: none;">
            <div class="mb-3 fs-12 text-muted">全部数据已加载完毕……</div>
          </div>

          <div class="infinite-status-prompt"
               style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;">
            <div>
              数据加载失败，
              <button class="btn btn-outline-theme btn-sm">重试</button>
            </div>
          </div>
        </div>
        <!--数据加载-->
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bestProducts: [],
    };
  },
  mounted() {
    this._getBest_()
  },
  methods: {
    _getBest_(getProductByAi, val, api) {
      api = api != undefined ? api : "/cat/productInfo/getProductByAi";
      this.$axios
        .post(api, {
          getProductByAi,
          limit: "10",
        })
        .then((res) => {
          // console.log("后端获取1", this[val], val, res.data.productPage)
          this.bestProducts = res.data.productPage.list;
          // console.log("后端获取2", this[val])
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
  }
};
</script>

<style scoped>
/*@import "https://static.konlonair.com/macwk-client/css/7343d4b.css";*/
@import "../../assets/css/zt.css";
/*@import "https://static.konlonair.com/FlyCat-client/css/7343d4b.css";*/
</style>
